<template>
  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color=#030418
      text-color="#fff"
      active-text-color="#ffd04b">

    <el-menu-item index="1" @click="manageQA">管理问卷</el-menu-item>

    <div class="floatbtn" v-show="!islogin">
      <el-button size="small" @click="loginBtn">登录</el-button>
      <el-button size="small" @click="registerBtn">注册</el-button>
    </div>

    <div v-show="islogin" class="userInfo">
      <el-dropdown>
        <el-button size="small" class="userinfoBtn">{{ nickname }}</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="homeLogoutBtn">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-menu>

</template>


<script>
import HomeUserInfoItem from "@/components/UserInfoItem";

export default {
  name: "HomeNavBar",
  components: {HomeUserInfoItem},

  data() {
    return {
      loginurl: 'login',
      activeIndex: '1',
      activeIndex2: '1'
    };
  },

  props: ['islogin', 'username', 'nickname'],

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    manageQA() {
      if(this.islogin === true) {
        const { href } = this.$router.resolve({
          path: '/qamanage',
        });
        window.open(href,'_self')

        console.log('is loggedin ');
      }
      else {
        console.log('loggin in is false');
        const { href } = this.$router.resolve({
          path: '/login',
        });
        window.open(href,'_self')
      }
      console.log('press manage QA');
    },
    loginBtn() {
      const { href } = this.$router.resolve({
        path: '/login',
      });
      window.open(href,'_self')

      console.log('login btn pressed');
    },
    registerBtn() {
      const { href } = this.$router.resolve({
        path: '/login/register',
      });
      window.open(href,'_self')

      console.log('register btn pressed');
    },

    // 退出登录
    homeLogoutBtn(){
      localStorage.clear()
      console.log('clear localS');
      this.$router.go(0)
    }
  },

}

</script>

<style scoped>
  .el-menu {
    /*margin-left: 100px;*/
    background-color: #030303;
  }

  .el-button {
    background-color: transparent;
    color: white;
  }

  .floatbtn {
    vertical-align: center;
    float: right;
    margin-top: 13px;
    margin-right: 16px;
    background-color: transparent;
    color: white;
  }
  .userInfo {
    float: right;
  }

  .userinfoBtn {
    margin-top: 14px;
    margin-right: 18px;
  }
</style>